<template>
    <NForm ref="formRef" :model="form" inline size="small">
        <NFormItem span="24 s:12 m:6" prop="cardNumber">
            <NInput v-model:value="form.cardNumber" clearable placeholder="充值卡号"></NInput>
        </NFormItem>

        <NFormItem span="24 s:12 m:6" prop="time">
            <NDatePicker
                v-model:value="form.time"
                type="daterange"
                start-placeholder="创建开始日期"
                end-placeholder="创建结束日期"
                clearable
            />
        </NFormItem>
        <NFormItem span="24 s:12 m:6">
            <NButton type="primary" @click="search">
                <template #icon>
                    <NIcon>
                        <Search />
                    </NIcon>
                </template>
                查询
            </NButton>
        </NFormItem>
        <NFormItem span="24 s:12 m:6">
            <NButton @click="reset">重置</NButton>
        </NFormItem>
    </NForm>
    <NDivider style="margin-top: 0px" />
    <NFlex justify="space-between" v-if="false">
        <NFlex>
            <NButton type="primary" size="small">
                <template #icon>
                    <NIcon>
                        <PlusSharp />
                    </NIcon>
                </template>
                新建
            </NButton>
            <NButton secondary size="small">批量导入</NButton>
        </NFlex>
        <NButton secondary size="small">
            <template #icon>
                <NIcon>
                    <Download />
                </NIcon>
            </template>
            下载
        </NButton>
    </NFlex>
    <NDataTable class="mt-4" :columns="columns" :data="list" :loading="loading"></NDataTable>

    <NFlex justify="flex-end" class="mt-4">
        <NPagination
            v-model:page="pager.pageIndex"
            v-model:page-size="pager.pageSize"
            :item-count="total"
            show-size-picker
            :page-sizes="[10, 20, 50, 100]"
        />
    </NFlex>
</template>

<script setup lang="tsx">
import { reactive, ref, watch } from 'vue'
import dayjs from 'dayjs'
import { Search, Download } from '@vicons/carbon'
import { PlusSharp } from '@vicons/material'
import { NDivider, NTag, NFlex, NButton, NSelect, useMessage, type DataTableColumns, type FormInst } from 'naive-ui'
import { queryRechargeList } from '@/api/bill'
import { RechargeOptions, CardType } from '@/constants/bill'

console.log(RechargeOptions)

defineOptions({
    name: 'RechargeBill'
})

const message = useMessage()
const formRef = ref<FormInst | null>(null)
const form = ref<
    Api.Bill.RechargeSearchParams & {
        time: null | [number, number]
    }
>({
    cardNumber: null,
    status: null,
    startTime: null,
    endTime: null,
    time: null
})

const columns: DataTableColumns<Api.Bill.Recharge> = [
    {
        title: '订单号',
        key: 'orderNumber'
    },

    {
        title: '卡号',
        key: 'cardNumber'
    },

    {
        title: '卡类型',
        key: 'cardType',
        render: row => CardType[row.cardType]
    },
    {
        title: '订单金额',
        key: 'amount'
    },
    {
        title: '到账金额',
        key: 'extendedAmount'
    },

    {
        title: '状态',
        key: 'cardStatus',
        render: row => {
            if (row.status === 2)
                return (
                    <NTag size="small" type="success">
                        成功
                    </NTag>
                )
            if (row.status === 1)
                return (
                    <NTag size="small" type="error">
                        失败
                    </NTag>
                )
        }
    },

    {
        title: '创建日期',
        key: 'createdAt',
        render(row) {
            return dayjs(row.createdAt * 1000).format('YYYY-MM-DD HH:mm:ss')
        }
    },

    {
        title: '操作',
        key: 'actions',
        render: row => {
            return <NFlex></NFlex>
        }
    }
]

const list = ref<Api.User.UserList>([])
const total = ref(0)
const loading = ref(false)
const pager = reactive({
    pageIndex: 1,
    pageSize: 10
})
const queryData = async () => {
    const { time, ...opts } = form.value
    loading.value = true
    const [err, res] = await queryRechargeList({
        ...opts,
        ...pager,
        startTime: time ? Math.ceil(time[0] / 1000) : undefined,
        endTime: time ? Math.ceil(time[1] / 1000) : undefined
    })
    loading.value = false
    if (!err) {
        const { count, list: dataList } = res
        list.value = dataList
        total.value = count
    }
}
queryData()
watch(pager, queryData)

const search = () => {
    pager.pageIndex = 1
    queryData()
}

const reset = () => {
    form.value = {
        cardNumber: null,
        status: null,
        startTime: null,
        endTime: null,
        time: null
    }
    pager.pageIndex = 1
    queryData()
}
</script>
